<template>
	<view class="productItem">
		<view class="user-info" @click="goDetail">
			<uni-icons type="person" class="icon" size="20" color="#222"></uni-icons>
			<view class="name">
				<!-- {{ source.supplierCode }}- -->
				{{ source.supplierName }}
			</view>
			<uni-icons v-if="source.supplierTel" type="phone" size="18" color="#666"></uni-icons>
			<view class="tel" @click.stop="callPhone(source.supplierTel)">
				{{source.supplierTel }}
			</view>
		</view>
		<view class="info-wrapper" @click="goDetail">
			<image :src="source.productImage" mode="aspectFill" class="product-image"></image>
			<image :src="source.labelImage" class="label-img" mode="widthFix"></image>
			<view class="info">
				<view class="title">
					{{ source.productName }}
				</view>
				<view class="label-wrapper" v-if="source.labelList && source.labelList.length">
					<view class="label-item" v-for="(item,index) in source.labelList" :key="index"
						:style="{'color':item.labelColor,'background-color':item.labelColor + '11','border-color': item.labelColor}">
						{{ item.labelName }}
					</view>
				</view>
				<view class="number" v-if="source.productStatus === 1 || source.productStatus === 10">
					<text>库存{{ source.supply }}件</text>
					<text v-if="source.productStatus === 1" class="line"></text>
					<text v-if="source.productStatus === 1">已售{{ source.sold || 0 }}件</text>
				</view>
				<view class="number">
					<text>起订量：{{ source.moq }}件</text>
					<text v-if="source.loq" class="line"></text>
					<text v-if="source.loq">限购量：{{ source.loq }}件</text>
				</view>
				<view class="sale-info-wrapper">
					<view class="sales-volume">
						<text>30天售后率：</text>
						<text class="volume"
							v-if="source.afterSalesRate">{{ parseFloat((source.afterSalesRate * 100).toFixed(2)) }}%</text>
						<text v-else>无</text>
					</view>
					<view class="sales-volume">
						<text>30天销售</text>
						<text class="volume">{{ source.salesVolume }}件</text>
					</view>
				</view>
				<view class="spec-wrapper">
					<view class="price" v-if="source.examinePrice || source.sellingPrice">
						<text class="unit">￥</text>
						<text>{{ (source.examinePrice || source.sellingPrice).toFixed(1) }}</text>
						<text class="unit">/件</text>
					</view>
					<view v-else class="price">
						未报价
					</view>
					<view class="spec">
						毛重{{ source.grossWeight }}斤 净重{{ source.netWeight }}斤
					</view>
				</view>
			</view>
		</view>
		<view class="price-warn-wrapper" v-if="source.warning">
			<view class="info">
				<text>警示:当前报价</text>
				<text class="error" v-if="source.warningType === 'max'">高于</text>
				<text v-else>低于</text>
				<text>平台警示价【{{ source.warningText }}元/斤】(净单价)</text>
				<text>建议将单件价格调整到【{{ source.warningText2 }}元/件】范围内。</text>
			</view>
			<!-- <view class="price-range">
				<text>当前净单价：</text>
				<text>{{ source.netPrice }}元/斤</text>
			</view>
			<view class="price-range">
				<text>净单价预设范围：</text>
				<text>{{ source.warningText }}元/斤</text>
			</view> -->
		</view>
		<view class="btn-wrapper">
			<view class="date">
				{{ date }}
			</view>
			<view v-if="source.productStatus === 10 && $permissions.verify('app:product:examine')" class="btn primary"
				@click="resolve">
				同意上架
			</view>
			<view class="btn" v-if="source.productStatus === 10 && $permissions.verify('app:product:examine')"
				@click="reject">
				驳回申请
			</view>
			<view class="btn" v-if="source.productStatus === 10 && $permissions.verify('app:product:examine')"
				@click="changePrice">
				调整价格
			</view>
			<view class="btn" v-if="source.productStatus === 1 && $permissions.verify('app:product:take-off')"
				@click="takeOff">
				下架
			</view>
			<view class="btn" v-if="source.productStatus === 1 && $permissions.verify('app:product:frozen')"
				@click="frozen">
				冻结
			</view>
			<view class="btn" v-if="source.productStatus === 3 && $permissions.verify('app:product:frozen')"
				@click="unfreeze">
				解冻
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="popup-wrapper">
				<view class="popup-title-wrapper">
					<text class="title">驳回申请</text>
				</view>
				<view class="popup-content-wrapper">
					<textarea class="textarea" focus v-model="reason" placeholder="请输入驳回原因" maxlength="50"></textarea>
				</view>
				<view class="popup-btn-wrapper">
					<view class="btn" @click="closeReject">
						取消
					</view>
					<view class="btn primary" @click="confirmReject">
						驳回申请
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			index: {
				type: Number,
				default () {
					return 0
				}
			},
			source: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				selectId: '',
				reason: ''
			}
		},
		computed: {
			date() {
				let dateStr = ""
				const statusTime = this.source.statusTime || '';
				if (this.source.productStatus === 1) {
					dateStr = '上架时间:' + statusTime.substring(5, 16)
				} else if (this.source.productStatus === 2) {
					dateStr = '下架时间:' + statusTime.substring(5, 16)
				} else if (this.source.productStatus === 10) {
					dateStr = statusTime.substring(5, 16)
				} else if (this.source.productStatus === 11) {
					dateStr = '驳回时间:' + statusTime.substring(5, 16)
				} else if (this.source.productStatus === 3) {
					dateStr = '冻结时间:' + statusTime.substring(5, 16)
				}
				return dateStr
			}
		},
		mounted() {

		},
		methods: {
			goDetail() {
				uni.navigateTo({
					url: '/subPage_product/productDetail?id=' + this.source.id
				})
			},
			resolve() { // 审核通过上架
				let content = '本操作确认以后，该商品将正式上架售卖。如果不确定请选择取消。';
				if (this.source.warning && this.source.warningType === 'max') {
					content = '该商品当前净单价高于预设价格范围，是否同意上架？'
				} else if (this.source.warning && this.source.warningType === 'min') {
					content = '该商品当前净单价低于预设价格范围，是否同意上架？'
				}
				this.$showModal({
					title: '同意上架',
					content: content,
					confirmText: '同意上架',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							const data = await this.$api.post('/adm/product/examine', {
								id: this.source.id,
								productStatus: 1
							})
							if (data.code === 200) {
								uni.showToast({
									title: '商品已上架'
								})
								this.$emit('refresh')
							}
						}
					}
				})
			},
			reject() { // 驳回申请
				this.reason = '';
				this.$refs.popup.open('center')
			},
			closeReject() { //关闭驳回窗口
				this.$refs.popup.close()
			},
			async confirmReject() { //提交驳回
				if (!this.reason) {
					uni.showToast({
						title: '请输入原因',
						icon: 'error'
					})
					return
				}
				const data = await this.$api.post('/adm/product/examine', {
					id: this.source.id,
					productStatus: 11,
					examineOpinion: this.reason,
				})
				if (data.code === 200) {
					uni.showToast({
						title: '商品已驳回'
					})
					this.closeReject()
					this.$emit('refresh')
				}
			},
			takeOff() { // 下架
				this.$showModal({
					title: '商品下架',
					content: '是否将该商品下架？',
					confirmText: '下架',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							const data = await this.$api.post('/adm/product/takeBatchOff', [this.source.id])
							if (data.code === 200) {
								uni.showToast({
									title: '商品已下架'
								})
								this.$emit('refresh')
							}
						}
					}
				})
			},
			frozen() { //冻结
				this.$showModal({
					title: '商品冻结',
					content: '是否将该商品进行冻结？',
					confirmText: '冻结',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							const data = await this.$api.post('/adm/product/frozen', {
								id: this.source.id
							})
							if (data.code === 200) {
								uni.showToast({
									title: '商品已冻结'
								})
								this.$emit('refresh')
							}
						}
					}
				})
			},
			unfreeze() { //解冻
				this.$showModal({
					title: '商品解冻',
					content: '是否将该商品解冻？',
					confirmText: '解冻',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							const data = await this.$api.post('/adm/product/unfreeze', {
								id: this.source.id
							})
							if (data.code === 200) {
								uni.showToast({
									title: '商品已解冻'
								})
								this.$emit('refresh')
							}
						}
					}
				})
			},
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			changePrice() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 1]; //上一个页面
				prevPage.$vm.changePrice(this.source)
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.productItem {
		background-color: #ffffff;
		border-radius: 20upx;
		overflow: hidden;

		.user-info {
			display: flex;
			align-items: center;
			font-size: 32upx;
			margin-bottom: 20upx;
			height: 80upx;
			background-color: #F5F6FA;
			padding: 0 30upx;

			.name {
				font-weight: bold;
				flex: 1;
				color: #222222;
			}

			.tel {
				color: #666;
			}

			.icon {
				font-weight: bold;
				margin-right: 5upx;
			}
		}

		.info-wrapper {
			display: flex;
			padding: 20upx 30upx 10upx 30upx;
			position: relative;

			.label-img {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 25rpx;
				left: 35rpx;
				z-index: 1;
			}

			.product-image {
				width: 140upx;
				min-width: 140rpx;
				height: 140upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}

			.info {
				flex: 1;

				.title {
					font-size: 32upx;
					line-height: 36upx;
					margin-bottom: 20upx;
					width: 500rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					-webkit-box-orient: vertical; //盒子中内容竖直排列
					font-weight: bold;
					color: #343434;
				}

				.label-wrapper {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.label-item {
						padding: 0rpx 20rpx;
						margin-bottom: 15rpx;
						font-size: 24upx;
						color: #0D8EFF;
						border: 1rpx solid #0D8EFF;
						background-color: #0D8EFF22;
						margin-right: 15rpx;
						border-radius: 5rpx;
					}
				}

				.number {
					font-size: 28upx;
					color: #575A6E;
					line-height: 28upx;
					margin-bottom: 20upx;
					display: flex;
					align-items: center;

					.line {
						margin: 0 20upx;
						height: 24upx;
						width: 2upx;
						background-color: #cecece;
						display: inline-block;
					}
				}

				.sale-info-wrapper {
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.sales-volume {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;

					.volume {
						color: #F93C21;
					}
				}

				.spec-wrapper {
					display: flex;
					align-items: center;


					.price {
						font-size: 38upx;
						font-weight: bold;
						color: #FC003B;
						margin-right: 20upx;

						.unit {
							font-size: 24upx;
						}
					}

					.spec {
						font-size: 28upx;
						color: #555;
					}
				}
			}
		}

		.price-warn-wrapper {
			padding: 20upx;
			margin: 20upx;
			border-radius: 10rpx;
			background-color: #ff000022;
			color: #434343;
			font-size: 28rpx;

			.error {
				font-weight: bold;
				color: #f00;
			}
		}

		.btn-wrapper {
			display: flex;
			align-items: center;
			margin: 20upx 0;
			padding: 0 30upx;

			.date {
				flex: 1;
				font-size: 24upx;
				color: #666;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 60rpx;
				min-width: 100rpx;
				padding: 0upx 10upx;
				background-color: #ffffff;
				border: 1upx solid #D6D6D6;
				border-radius: 10upx;
				font-size: 28upx;
				margin-left: 15upx;

				&.primary {
					color: #ffffff;
					background-color: #555BFF;
					border-color: #555BFF;
				}
			}
		}

		.popup-wrapper {
			background-color: #ffffff;
			width: 600upx;
			height: 360upx;
			border-radius: 20upx;
			overflow: hidden;
			position: relative;

			.popup-title-wrapper {
				text-align: center;
				position: relative;
				margin: 30upx 0;

				.title {
					font-size: 36upx;
				}

				.close {
					position: absolute;
					right: 30upx;
				}
			}

			.popup-content-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20upx 0;

				.textarea {
					width: 520upx;
					height: 140upx;
					box-sizing: border-box;
					border: 1upx solid #cecece;
					padding: 20upx;
					border-radius: 10upx;
				}
			}

			.popup-btn-wrapper {
				position: absolute;
				bottom: 0;
				height: 100upx;
				width: 100%;
				display: flex;
				align-items: center;
				border-top: 1upx solid #efefef;

				.btn {
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #212121;
					flex: 1;
					font-size: 32upx;

					&:first-child {
						border-right: 1upx solid #efefef;
					}

					&.primary {
						color: #555BFF;
					}
				}
			}
		}
	}
</style>